<template>
  <view class="bg">
    <view class="departmentBg">
      <view
        v-for="(item, index) in departmentArr"
        :key="index"
        :class="item.selected ? 'departmentTwo' : 'departmentOne'"
        @click="item.selected ? deletePm(item) : addPm(item)"
      >
        <view class="nameFont">{{ item.name }}</view>
        <view class="round" v-show="!item.selected"></view>
        <view class="roundSelected" v-show="item.selected">
          <text class="pmFont">{{ item.pm }}</text>
        </view>
      </view>
    </view>
    <view class="bottom_btn">
      <view class="left_btn" @click="reset">重置</view>
      <view class="right_btn">完成</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pm: 0,
      departmentArr: [
        {
          name: "住建局",
          pm: null,
          selected: false,
        },
        {
          name: "统计局",
          pm: null,
          selected: false,
        },
        {
          name: "自然资源与规划局",
          pm: null,
          selected: false,
        },
        {
          name: "发展与改革局",
          pm: null,
          selected: false,
        },
        {
          name: "农业局",
          pm: null,
          selected: false,
        },
        {
          name: "人社局",
          pm: null,
          selected: false,
        },
        {
          name: "水利局",
          pm: null,
          selected: false,
        },
        {
          name: "市场监管局",
          pm: null,
          selected: false,
        },
        {
          name: "生态环境局",
          pm: null,
          selected: false,
        },
        {
          name: "卫健局",
          pm: null,
          selected: false,
        },
      ],
    };
  },
  methods: {
    addPm(x) {
      this.pm++;
      x.pm = this.pm;
      x.selected = !x.selected;
    },
    deletePm(x) {
      x.selected = !x.selected;
      this.pm--;
      this.departmentArr.forEach((item) => {
        if (item.pm > x.pm) {
          item.pm = item.pm - 1;
        }
      });
    },
    reset() {
      this.pm = 0;
      this.departmentArr.forEach((item) => {
        item.selected = false;
        item.pm = null;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.departmentBg {
  margin-bottom: 98rpx;

  .departmentOne {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26rpx 30rpx;
    background: white;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
    border: 1px solid white;
  }

  .departmentTwo {
    background: rgba(48, 116, 255, 0.1);
    border: 1px solid #3074ff;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26rpx 30rpx;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
  }

  .nameFont {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #272b32;
  }

  .round {
    width: 30rpx;
    height: 30rpx;
    background: #ffffff;
    border: 1px solid #8e9cb3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .roundSelected {
    width: 32rpx;
    height: 32rpx;
    background: rgba(57, 136, 255, 1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }
}

.bottom_btn {
  width: 100vw;
  height: 98rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left_btn {
    width: 50%;
    height: 100%;
    background: #ffffff;
    border: 1px solid #e7e9f0;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #8e9cb3;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .right_btn {
    width: 50%;
    height: 100%;
    background: rgba(48, 116, 255, 1);
    border: 1px solid #e7e9f0;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(254, 254, 254, 1);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
